<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
       <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <!-- <el-button type="primary"  icon="el-icon-plus" class="sureBtn"  size="medium"  @click="handleAdd" > 新 增 活 动</el-button> -->
           <span style="color: transparent;">1</span>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search fr">
            <div>
              <el-input  v-model="selectForm.name"   size="medium"  placeholder="老人姓名"></el-input>
            </div>
            <div>
              <el-select v-model="selectForm.status" clearable placeholder="任务状态" filterable size="medium"  style="width: 100%;">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-date-picker
                v-model="selectForm.start_time"
                align="right"
                type="date"
                placeholder="开始时间"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
            <div>
             <el-date-picker
               v-model="selectForm.end_time"
               align="right"
               type="date"
               placeholder="结束时间"
               value-format="yyyy-MM-dd">
             </el-date-picker>
            </div>
            <el-button size="medium"   type="primary"   icon="el-icon-search"  class="fr"    @click="handleSearch" > 搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content" style="height: calc(100vh - 250px);">
      <main-table
        :columns="tableColumns"
        :data="tableList"
        :loading="loading"
        :pagination="pagination"
        @getData="fetchTableList"
        wrapperHeight="calc(100% - 73px)" height="100%"
      >
      <el-table-column slot="status" label="状态">
        <template slot-scope="scope">
          <el-tag class="tag-cursor" v-if="scope.row.status == '1'" type="warning">待完成</el-tag>
          <el-tag class="tag-cursor" v-else-if="scope.row.status == '2'">进行中</el-tag>
          <el-tag class="tag-cursor" v-else-if="scope.row.status == '3'" type="success">已完成</el-tag>
          <el-tag class="tag-cursor" v-else-if="scope.row.status == '0'">预约</el-tag>
          <el-tag class="tag-cursor" v-else-if="scope.row.status == '-1'" type="danger">超时</el-tag>
          <el-tag class="tag-cursor" v-else type="danger">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column slot="action" fixed="right" label="操作" width="350">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="views(scope.row)">查看</el-button>
          <el-button size="mini" type="success" @click="download(scope.row)">下载</el-button>
          <el-button size="mini" type="success" :disabled="scope.row.status != '0'" :class="{ 'button-edit-color': scope.row.status == '0' }" @click="fenpei(scope.row)">分配</el-button>
          <el-button size="mini" type="success" :disabled="scope.row.status != '2' && scope.row.status != '1'" @click="chaoshi(scope.row)">超时</el-button>
          <el-button size="mini" type="danger" @click="cancelOrder(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </main-table>
    </div>

    <!--查看详情弹窗-->
    <el-dialog
      title="任务信息"
      :visible.sync="dialogVisible"
      width="800px">
      <order-info @cancle="dialogVisible = false" :close-on-click-modal="false" :data="ruleForm" @load="handleSearch"></order-info>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 分配订单 -->
    <el-drawer title="分配订单" :size="1000" :visible.sync="dialogServiceVisible" :destroy-on-close="true" @close="dialogServiceVisible = false" :wrapperClosable="false" :with-header="false" direction="rtl">
      <fenpei-list @close="closeServerDrawer" :data="ruleForm"></fenpei-list>
    </el-drawer>

  </div>
</template>
<script>
  import mainTable from "@/components/main-table/index";
  import orderactivityAdd from './components/orderactivity-add'
  import * as APIWangge from "@/api/wangge";
  import * as APIOrder from '@/api/order'
  import orderInfo from './components/order-info'
  import fenpeiList from './components/fenpei-list'
  import * as APIOrderactivity from '@/api/orderactivity'
  import { unixToDate, countTimeDown } from "@/utils"
  export default {
    name: "doorserve-serve-orderactivity",
    components: {
      mainTable,
      orderInfo,
      fenpeiList
    },
    data() {
      return {
        loading: false,
        title: '添加图标',
        dialogVisible: false,
        dialogServiceVisible:false,
        ruleForm: {},
        currentSelectedData: [],
        pageData: {},
        selectForm: {
          page: 1
        },
        tableList:[],
        pagination: {
          current: 1,
          size: 10,
          total: 0
        },
        tableColumns: [
         {
           index: true,
           fixed: true
         },
         {
           prop: 'id',
           label: '订单号',
           fixed: true,
           width: 80
         },
         {
           prop: 'older_name',
           label: '老人姓名',
           fixed: true,
           width: 100
         },
         // {
         //   prop: 'source_type',
         //   label: '任务来源',
         //   width: 100,
         //   formatter (row, column, cellValue) {
         //     return utils.sourceType(cellValue)
         //   }
         // },
         {
           prop: 'address',
           label: '老人住址',
           width: 320
         },
         {
           prop: 'servicer_name',
           label: '负责护工',
           width: 100
         },
         {
           prop: 'task_type',
           label: '任务内容',
           width: 200
         },
         {
           slot: 'status'
         },
         {
           prop: 'long_time',
           label: '服务时长',
           width: 140,
           formatter (row, column, cellValue) {
             return countTimeDown(cellValue)
           }
         },
         {
           prop: 'service_time',
           label: '派单时间',
           width: 160,
           formatter (row, column, cellValue) {
             if (cellValue === '0') {
               return '无'
             }
             return unixToDate(cellValue)
           }
         },
         {
           prop: 'start_time',
           label: '开始时间',
           width: 160,
           formatter (row, column, cellValue) {
             if (cellValue === '0') {
               return '未签'
             }
             return unixToDate(cellValue)
           }
         },
         {
           prop: 'end_time',
           label: '结束时间',
           width: 160,
           formatter (row, column, cellValue) {
             if (cellValue === '0') {
               return '未签'
             }
             return unixToDate(cellValue)
           }
         },
         {
           slot: 'action'
         }
        ],
        key: Math.random(),
        teamList:[],
        statusOptions: [
          {
            value: '1',
            label: '待完成'
          },
          {
            value: '2',
            label: '进行中'
          },
          {
            value: '3',
            label: '已完成'
          },
          {
            value: '0',
            label: '预约'
          },
          {
            value: '-1',
            label: '超时'
          },
          {
            value: '-2',
            label: '失败'
          }
        ],
      };
    },
    created () {
      const server_id = this.$route.query.server_id || '';
      const source_type = this.$route.query.source_type || '';
      const name = this.$route.query.name || '';
      const oid = this.$route.query.oid || '';
      const pingfen = this.$route.query.pingfen || '';
      if (server_id) {
        this.selectForm.server_id = server_id;
        this.clear()
      }
      if (oid) {
        this.selectForm.oid = oid;
        this.clear()
      }
    },
    beforeDestroy() {},
    mounted() {
      this.fetchTableList();
    },
    methods: {
      // 手动清空/搜索
      clear () {
        this.fetchTableList({ page: 1 })
      },
      handleSearch() {
        this.pagination = {
          current: 1,
          size: 10,
          total: 0
        }
         this.fetchTableList({ page: 1 })
      },
      fetchTableList(pageObj) {
        this.loading = true;
        let data = {
          ...this.selectForm,
          ...pageObj
        }
        if(data.hasOwnProperty('status') && !data.status){
          delete data.status;
        }
        APIOrder.orderbindList(data).then((resp) => {
          if (resp.code === 200) {
            const { list = [], total = 0 } = resp.data;
            this.tableList = list || []
            this.pagination.total = total;
          }
        }).finally(() => {
        this.loading = false
        });
      },
      cancel(formName) {
        this.$refs[formName].resetFields();
        this[formName] = {};
        this.dialogVisible = false;
      },
      closeServerDrawer (type) {
        this.dialogServiceVisible = false
        this.clear()
      },
      // 查看详情
      views (row) {
        this.key = Math.random();
        APIOrder.orderbindOrderInfo({ id: row.id }).then((res) => {
          this.dialogVisible = true
          this.ruleForm = { ...res.data.info }
        })
      },
      //下载
      download (row) {
        window.location.href = window.location.origin + '/exorder/upload?type=1&ids=' + row.id
      },
      // 分配服务
      fenpei (row) {
        this.ruleForm  = { ...row };
        this.dialogServiceVisible = true;
      },
      // 订单超时
      chaoshi (row) {
        this.$confirm("确定要设置该任务超时吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
           APIOrder.orderbindChaoshi({ id: row.id }).then((resp) => {
              if (resp.code === 200) {
                this.$message({ type: "success", message: "设置任务超时成功!"});
                this.fetchTableList();
              }
            });
          }).catch(() => { });
      },
      cancelOrder(row) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
           APIOrder.orderbindDelete({ id: row.id }).then((resp) => {
              if (resp.code === 200) {
                this.$message({ type: "success", message: "删除成功!"});
                this.fetchTableList();
              }
            });
          }).catch(() => { });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: inline-block;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
    .task-icon-img{
      width: 80px;
      height: 80px;
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
</style>
